<template>
  <h1>这是 App 组件</h1>
  <h2>这是副标题</h2>
  <h3>{{ username }}</h3>
  <p>生成一个随机数，{{ (Math.random()*10).toFixed(2) }}</p>
  <p :title="new Date().toLocaleTimeString()">我在黑马学习程序员</p>
  <p>数量结果:{{ count }}</p>
  <button @click="showInfo">按钮</button>
  <button @click="addCount">数量+1</button>

  <hr>
  <my-swiper></my-swiper>
  <my-test></my-test>
  <my-search></my-search>
  <my-article :title="info.title" :author="info.author" :pub-time="info.pubTime"></my-article>
  <hr>
  <hr>
  <h3 class="thin" :class="[isItalic ? 'italic' : '',isRed ? 'red' : '']">字体变化样板</h3>
  
  <button @click="isItalic = !isItalic">点我字体变化</button>
  <button @click="isRed = !isRed">点我颜色变化</button>


  <h3 class="thin" :class="classObj">牛逼哄哄</h3>
  <button @click="classObj.isItalic = !classObj.isItalic">点我字体变化2</button>
  <button @click="classObj.isRed = !classObj.isRed">点我颜色变化2</button>

  <hr>
  <hr>

  <div :style="{color:active,fontSize:size+'px','background-color':bgcolor}">
    黑马程序员
  </div>
  <button @click="size += 1">字号+1</button>
  <button @click="size -= 1">字号-1</button>

  <hr>
  <hr>
  <hr>
  <my-counter :count="1" :state="true" :pg="username" @change="getCount"></my-counter>
  <hr>

  <hr>
  <!-- 声明路由连接 -->
  <router-link to="/home">首页</router-link>&nbsp;
  <router-link to="/movie">电影</router-link>&nbsp;
  <router-link to="/about">关于</router-link>
 <!-- 声明路由占位符 -->
  <router-view></router-view>

  <hr>
  <h1>库存信息</h1>
  <hr>
  <span>库存总数：</span>
  <input type="text" v-model="countNumber">
  <div style="border: 1px solid black;width: 300px;">
    <add-item></add-item>
  </div>
  <hr>
  <div style="border: 1px solid black;width: 300px;">
    <sub-item></sub-item>
  </div>
</template>


<script>
import MySearch from './components/MySearch.vue'
import MyArticle from './components/MyArticle.vue'
import MyCounter from './components/MyCounter.vue'
import { cloneVNode, computed } from 'vue'
import AddItem from './components/AddItem.vue'
import SubItem from './components/SubItem.vue'


  export default{
    name:'MyApp',
    data(){
      return {
        username:'娃哈哈',
        count:0,
        info:{
          title:'斗破苍穹',
          author:'萧炎',
          pubTime:'2018年'
        },
        isItalic:true,
        isRed:false,
        classObj:{
          italic:true,
          isRed:false
        },
        active:'red',
        size:30,
        bgcolor:'pink',
        colorss:'red'
      }
    },
    methods:{
      showInfo(){
        this.username = '兔八哥'
      },
      addCount(){
        this.count++
      },
      getCount(val){
        console.log('监听到了子组件变化',val);
        
      }

    },
    components:{
      'my-search':MySearch,
      'my-article':MyArticle,
      'my-counter':MyCounter,
      "add-item":AddItem,
      "sub-item":SubItem
    },
    provide(){
      return {
        colorss:computed(()=>this.colorss)
      }
    },
    computed:{
      countNumber:{
        set(val){
          console.log('val',val);
          
          this.$store.commit('setCounts',val)
        },
        get(){
          // this.$store.state.user.name
          return this.$store.state.count
        }
      }
    }
  }
</script>

<style lang="less">
  h1{
    font-weight: normal;
    color: red;
  }
  .thin{
    font-weight: 200;
  }

  .italic{
    font-weight: 1000;
  }
  .red{
    color: red;
  }
  // .router-link-active{
  //   background-color: red;
  //   color: white;
  //   font-weight: bold;
  // }
  .router-active{
    background-color: red;
    color: white;
    font-weight: bold;
  }

  // classObj.italic{
  //   font-weight: 1000;
  // }
  // classObj.red{
  //   color: red;
  // }
</style>